import type { RenderViewer, Slot } from "../../core";

import DropArea from "./DropArea";
import { CSSProperties } from "react";
import { DropPlugin } from "@/biz-components/pdf-view/plugin/drop/interface.ts";

const dropPlugin = (): DropPlugin => {
  const renderViewer = (props: RenderViewer): Slot => {
    const { slot } = props;

    if (slot.attrs) {
      const styles = slot.attrs && slot.attrs.style ? slot.attrs.style : {};
      const updateStyle: CSSProperties = {
        ...styles,
        ...{
          height: "100%",
          position: "relative",
          width: "100%",
        },
      };
      slot.attrs.style = updateStyle;
    }

    slot.children = (
      <>
        <DropArea containerRef={props.containerRef} openFile={props.openFile} />
        {slot.children}
      </>
    );

    return slot;
  };

  return {
    renderViewer,
  };
};

export default dropPlugin;
